<div id="header">
    <img src="/images/logo1.png" alt="logo" />
    <ul id="userinfo">
        <!--   <li>
            <a class="register" href="javascript:void(0) ">会员注册</a>/</li>
        <li><a class="login" href="javascript:void(0) ">登陆</a></li> -->
    </ul>
</div>

<div id="nav">
    <ul>
        <!-- 分类的模板引擎 -->
        <script type="text/html" id="catesTpl">
            <li><a href="/" class="{{cate_id===0 ? 'active' : ''}}">首页</a></li>
            {{each cates v}}
            <li>
                {{ if cate_id===v.id}}
                <a class="active" href="/index_list.html?cate_id={{v.id}} ">{{v.cate_name}}</a> {{else /}}
                <a href="/index_list.html?cate_id={{v.id}}">{{v.cate_name}}</a> {{/if}}
            </li>
            {{/each}}
        </script>
    </ul>
</div>

<script>
    $(async function() {
        // 判断用户是否登录
        isLogin()

        // 定义过滤器
        template.defaults.imports.substr = function(value) {
            // 超过10个字符使用...代替
            return value.substr(0, 10) + '...'
        }

        // 定义时间日期过滤器
        template.defaults.imports.formatDate = function(value) {
            // 超过10个字符使用...代替
            return moment(value).format('YYYY-MM-DD HH:mm:ss')
        }

        // 判断当前页是被首页或者新闻列表页或者新闻详情页所引入
        let cate_id = 0
        let cate_id_reg = /cate_id/
        if (location.search) {
            // 新闻列表页或者新闻详情页
            if (cate_id_reg.test(location.search)) {
                cate_id = location.search.split('=')[1] - 0
            } else {
                // 获取文章的id
                id = location.search.split('=')[1] - 0
                const article = await axios({
                    method: 'get',
                    url: 'api/articles/' + id
                })
                cate_id = article[0].cate_id
            }
        } else {
            // 首页
            cate_id = 0
        }

        // 1.分类数据
        const cates = await axios({
            method: 'get',
            url: 'api/index/cate'
        })

        // 渲染模板
        const cateHtml = template('catesTpl', {
            cates,
            cate_id
        })
        $('#nav ul').html(cateHtml)
    })

    // 判断用户是否登录
    function isLogin() {
        // 从本地缓存中获取token
        const token = localStorage.getItem('token')
        if (!token) {
            $('#userinfo').html(`<li>
            <a class="register " href=" javascript:void(0) ">会员注册</a>/</li>
        <li><a class="login " href="javascript:void(0) ">登陆</a></li>`)
        } else {
            let username = localStorage.getItem('username')
            $('#userinfo').html(`<li>
            <span>欢迎<i style='color:red;font-size:16px'>${username}</i>登录cms系统</span>/</li>
        <li><a class="logout" href="javascript:void(0) ">退出</a></li>`)
        }
    }


    layui.use('layer', function() {
        // 实现登录和注册的遮罩层
        var layer = layui.layer;
        // 点击登录按钮，打开登录的遮罩层
        $(document).on('click', '.login', function() {
            layer.open({
                title: '登录',
                type: 2,
                area: ['50%', '40%'],
                content: '/login.html',
                end: function() {
                    // 更新头部的状态
                    isLogin()
                }
            })
        })

        // 点击注册按钮，打开注册的遮罩层
        $(document).on('click', '.register', function() {
            layer.open({
                title: '注册',
                type: 2,
                area: ['40%', '40%'],
                content: ['/register.html', 'no']
            })
        })

        // 点击退出按钮，实现退出（清除本地缓存）
        $(document).on('click', '.logout', function() {
            localStorage.removeItem('token')
            localStorage.removeItem('username')
            layer.msg('退出成功', {
                icon: 6,
                time: 2000
            }, function() {
                // 更新状态
                isLogin()
            })
        })

    })
</script>